﻿@namespace Blazorise.Docs.Docs.Examples

<Button Color="Color.Primary" Clicked="@ShowModal">Show Modal</Button>

<Span Margin="Margin.Is3.FromStart">Modal is visible: @modalVisible</Span>

<Modal @bind-Visible="@modalVisible">
    <ModalContent Centered>
        <ModalHeader>
            <ModalTitle>Employee edit</ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Placeholder="Enter name..." />
            </Field>
            <Field>
                <FieldLabel>Surname</FieldLabel>
                <TextEdit Placeholder="Enter surname..." />
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
            <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

@code{
    private bool modalVisible;

    private Task ShowModal()
    {
        modalVisible = true;

        return Task.CompletedTask;
    }

    private Task HideModal()
    {
        modalVisible = false;

        return Task.CompletedTask;
    }
}